<template>
	<view class="user-address-list pt-md" :style="{background:pageColor}">
		<view @tap.stop="toUpdateItem(index)" class="item-child pl-lg pr-lg fill-base radius-16"
			:class="[{'mt-md':index!=0}]" v-for="(item,index) in list.data" :key="index">
			<view class="flex-warp pt-lg pb-lg b-1px-b">
				<view class="address-icon flex-center c-base radius"
					:style="{background:`linear-gradient(to right, ${subColor}, ${primaryColor})`}"><i
						class="iconfont iconjuli"></i></view>
				<view class="address-info flex-1 ml-md">
					<view class="flex-y-baseline username c-title text-bold">{{item.user_name}}
						<view class="ml-md f-desc c-caption">{{item.mobile}}</view>
					</view>
					<view class="f-desc c-title">{{`${item.address} ${item.address_info}`}}</view>
				</view>
			</view>
			<view class="oper-info f-paragraph c-caption flex-between">
				<view class="flex-y-center"
					:style="{color:options.check && item.id == check_id || !options.check &&  item.status==1?primaryColor:''}">
					<i class="iconfont icon-xuanze mr-sm"
						:class="[{'icon-xuanze-fill':options.check && item.id == check_id || !options.check &&  item.status==1}]"
						:style="{color:options.check && item.id == check_id || !options.check &&  item.status==1?primaryColor:''}"></i>
					<block v-if="options.check">{{item.id ==check_id?'当前选择地址':'点击选择'}}</block>
					<block v-else>{{item.status ==1?'默认地址':'设为默认'}}</block>
				</view>
				<view class="flex-center">
					<view @tap.stop="toDel(index)" class="pl-lg pr-lg">删除</view>
					<view @tap.stop="goDetail(index)" class="pl-lg">编辑</view>
				</view>
			</view>
		</view>


		<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading">
		</load-more>
		<abnor :tip="[{ text: '您还没有添加地址哦~', color: 0 }]" v-if="!loading&&list.data.length<=0&&list.current_page==1"
			percent="calc(100vh - calc(200rpx + env(safe-area-inset-bottom) / 2))">
		</abnor>
		<view class="space-max-footer"></view>

		<fix-bottom-button @confirm="$util.goUrl({url:`/user/pages/address/edit`})"
			:text="[{text:'添加新地址',type:'confirm'}]" bgColor="#fff"></fix-bottom-button>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		components: {},
		data() {
			return {
				options: {},
				check_id: 0,
				param: {
					page: 1,
				},
				list: {
					data: []
				},
				loading: true,
				lockTap: false,
			}
		},
		computed: mapState({
			haveOperItem: state => state.order.haveOperItem,
			technicianParam: state => state.technician.param,
		}),
		onLoad(options) {
			let {
				check = 0,
					type = 0
			} = options
			options.check = check * 1
			options.type = type * 1
			this.options = options
			if (check == 1) {
				try {
					let {
						address_info = {
							id: 0
						}
					} = this.$util.getPage(-1).orderInfo
					let {
						id
					} = address_info
					this.check_id = id
				} catch (e) {
					// #ifdef H5
					history.back()
					// #endif
				}
			}
			this.updateOrderItem({
				key: 'haveOperItem',
				val: false
			})
			this.initIndex()
		},
		// #ifdef H5
		destroyed() {
			// #endif
			// #ifndef H5
			onUnload() {
					// #endif
					let {
						check = 0
					} = this.options
					let {
						haveOperItem
					} = this
					if (check == 1 && haveOperItem) {
						this.$util.getPage(-1).orderInfo.address_info = {}
						this.$util.back()
					}
				},
				onPullDownRefresh() {
					// #ifndef APP-PLUS
					uni.showNavigationBarLoading()
					// #endif
					this.initRefresh()
					uni.stopPullDownRefresh()
				},
				onReachBottom() {
					if (this.list.current_page >= this.list.last_page || this.loading) return;
					this.param.page = this.param.page + 1;
					this.loading = true;
					this.getList();
				},
				methods: {
					...mapMutations(['updateUserItem', 'updateTechnicianItem', 'updateOrderItem']),
					async initIndex(refresh = false) {
						await this.getList()
						this.$util.setNavigationBarColor({
							bg: this.primaryColor
						})
						// #ifdef H5
						if (!refresh) {
							this.$jweixin.hideOptionMenu()
						}
						// #endif
					},
					initRefresh() {
						this.param.page = 1
						this.initIndex(true)
					},
					async getList() {
						let {
							list: oldList,
							param
						} = this
						let newList = await this.$api.mine.addressList(param);

						if (this.param.page == 1) {
							this.list = newList
						} else {
							newList.data = oldList.data.concat(newList.data)
							this.list = newList
						}
						this.loading = false
						this.$util.hideAll()
					},
					async toUpdateItem(index) {
						let item = this.list.data[index]
						let {
							check = 0
						} = this.options
						if (check) {
							if (check == 1) {
								this.$util.getPage(-1).orderInfo.address_info = item
								if (this.$util.getPage(-1).orderInfo.balance_discount_data && this.$util.getPage(-1)
									.orderInfo.balance_discount_data.is_balancediscount) {
									this.$util.getPage(-1).orderInfo.balance_discount_data.balance_discount_list = []
								}
								this.$util.back()
								this.$util.goUrl({
									url: 1,
									openType: `navigateBack`
								})
							}
							if (check == 2) {
								let param = Object.assign({}, this.technicianParam, {
									city_id: 0
								})
								this.updateTechnicianItem({
									key: 'param',
									val: param
								})
								let val = this.$util.pick(item, ['lat', 'lng', 'address',
									'address_info'
								])
								this.updateUserItem({
									key: 'location',
									val
								})
								let pages = getCurrentPages()
								let len = pages.length
								let prePage = ''
								if (len > 1) {
									prePage = pages[pages.length - 2].route
								}
								if (['pages/technician', 'user/pages/choose-technician'].includes(prePage)) {
									this.$util.getPage(-1).toChooseLocation(1)
									this.$util.goUrl({
										url: 1,
										openType: `navigateBack`
									})
								} else {
									this.updateUserItem({
										key: 'city_info',
										val: Object.assign({}, this.city_info, {
											id: 0
										})
									})
									this.updateUserItem({
										key: 'changeAddr',
										val: true
									})
									this.$util.goUrl({
										url: ['/pages/technician', '/user/pages/choose-technician'][this
											.options.type
										],
										openType: `reLaunch`
									})
								}
							}
						} else {
							let {
								id,
								status
							} = item
							await this.$api.mine.addressUpdate({
								id,
								status: status == 0 ? 1 : 0
							})
							this.initRefresh()
						}
					},
					async toDel(index) {
						let [res_del, {
							confirm
						}] = await uni.showModal({
							title: '提示',
							content: "请确认是否要删除此数据?"
						})
						if (!confirm) return;
						let {
							id
						} = this.list.data[index]
						let {
							check_id
						} = this
						if (this.lockTap) return
						this.lockTap = true
						this.$util.showLoading()
						try {
							await this.$api.mine.addressDel({
								id
							})
							this.$util.hideAll()
							this.$util.showToast({
								title: `删除成功`,
							});
							this.list.data.splice(index, 1)
							this.lockTap = false
							if (id == check_id) {
								this.updateOrderItem({
									key: 'haveOperItem',
									val: true
								})
							}
						} catch (e) {
							setTimeout(() => {
								this.lockTap = false
								this.$util.hideAll()
							}, 2000)
						}
					},
					goDetail(index) {
						let {
							id
						} = this.list.data[index]
						let url = `/user/pages/address/edit?id=${id}`
						this.$util.goUrl({
							url
						})
					},
				}
		}
</script>


<style lang="scss">
	.user-address-list {
		.address-icon {
			width: 64rpx;
			height: 64rpx;

			.iconfont {
				font-size: 38rpx;
			}
		}

		.address-info {
			max-width: 600rpx;
		}

		.username {
			font-size: 30rpx;
		}

		.oper-info {
			height: 80rpx;
		}
	}
</style>